<template>
  <el-form :model="product" label-width="120px">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="商品基本信息" name="productBaseInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称：">
              {{ product.productName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类：">
              {{ product.category1Name }} / {{ product.category2Name }} /
              {{ product.category3Name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌：">
              {{ product.brandName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位：">
              {{ product.unitName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态：">
              <el-tag v-if="product.auditStatus === 0" type="warning">未审核</el-tag>
              <el-tag v-else type="danger">未通过</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="轮播图：">
              <el-empty v-if="!auditFile.sliderUrls" :image-size="30" />
              <div v-else>
                <el-image
                  v-for="(item, index) in auditFile.sliderUrls"
                  :key="index"
                  :src="item"
                  class="audit_image"
                  lazy
                  :preview-src-list="auditFile.sliderUrls"
                  fit="cover" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="商品SKU信息" name="skuInfo">
        <el-form-item>
          <el-table :data="product.productSkuList" border style="width: 100%">
            <el-table-column prop="skuSpec" label="规格" width="180" />
            <el-table-column label="图片" #default="scope" width="110">
              <el-image :src="scope.row.thumbImg" lazy style="width: 80px" fit="cover" />
            </el-table-column>
            <el-table-column label="售价" prop="salePrice" />
            <el-table-column label="市场价" prop="marketPrice" />
            <el-table-column label="成本价" prop="costPrice" />
            <el-table-column label="库存数" prop="stockNum" />
            <el-table-column label="重量" prop="weight" />
            <el-table-column label="体积" prop="volume" />
          </el-table>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="商品详情信息" name="productDetails">
        <el-form-item label="商品描述：">
          {{product.productDetails.productDesc}}
        </el-form-item>
        <el-form-item label="详情图片：">
          <el-empty v-if="!auditFile.imageUrls" :image-size="50" />
          <div v-else>
            <el-image
              v-for="(item, index) in auditFile.imageUrls"
              :key="index"
              :src="item"
              lazy
              class="audit_image"
              :preview-src-list="auditFile.imageUrls"
              fit="cover"
            />
          </div>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="审核信息" name="auditMessage">
        <el-form-item>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入审核信息"
            v-model.trim="auditMessage">
          </el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="审核操作" name="submit" :disabled="true">
        <el-form-item>
          <el-button
            type="success"
            size="large"
            @click="updateAuditStatus(product.id, 1)"
          >
            通过
          </el-button>
          <el-button
            type="warning"
            size="large"
            plain
            @click="updateAuditStatus(product.id, 2)"
          >
            驳回
          </el-button>
          <el-button
            size="large"
            @click="closeDialog">
            取消
          </el-button>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup>
import { ref } from "vue";

// 激活面版
const activeNames = ref(['productBaseInfo', 'skuInfo', 'productDetails', 'auditMessage', 'submit']);

// 审批数据，从父组件获取
const props = defineProps({
  product: {
    type: Object,
    required: true
  },
  auditFile: {
    type: Object
  },
  auditMessage: {
    type: String
  }
});

const emits = defineEmits(["updateAuditStatus", "cancelAudit"]);
// 更新审批状态
const updateAuditStatus = (id, auditStatus) => {
  emits("updateAuditStatus", { id, auditStatus, auditMessage: props.auditMessage });
};

// 取消审批
const closeDialog = () => {
  emits("cancelAudit");
};
</script>

<style scoped>
:deep(.el-collapse-item__header) {
  font-size: 14px;
  font-weight: bold;
}

.audit_image {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
</style>
